<template>
  <div class="container">
    <van-nav-bar fixed>
      <template #left>
        <div class="logo"></div>
      </template>
      <template #right>
        <van-button
          round
          class="search-btn"
          icon="search"
          type="info"
          @click="$router.push({ path: '/search' })"
        >
          搜索
        </van-button>
      </template>
    </van-nav-bar>
    <!-- tab标签页 -->
    <van-tabs @click="changeClick" v-model="active" color="#9f0">
      <van-tab v-for="item in channelList" :key="item.id" :title="item.name">
        <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
          <van-list
            v-model="loading"
            :finished="finished"
            finished-text="没有更多了"
            @load="onLoad"
          >
            <van-cell
              v-for="item in list"
              :key="item.art_id.toString()"
              :title="item.title"
              @click="
                $router.push({ path: '/article', query: { id: item.art_id } })
              "
            >
              <template #label>
                <van-grid :column-num="item.cover.type">
                  <van-grid-item
                    v-for="(img, index) in item.cover.images"
                    :key="index"
                  >
                    <van-image lazy-load :src="img" />
                  </van-grid-item>
                </van-grid>
                <div>
                  <span>{{ item.aut_name }}</span>
                  <span>({{ item.comm_conut }})评论</span>
                  <span>{{ item.pubdate | showTime }}</span>
                </div>
              </template>
            </van-cell>
          </van-list>
        </van-pull-refresh>
      </van-tab>
    </van-tabs>
  </div>
</template>

<script>
import { getChannelList, getArticles } from "./home.js";
import moment from "moment";
moment.locale("zh-cn");
export default {
  name: "home",
  data() {
    return {
      active: 0, //tab栏
      list: [], //文章列表
      loading: false, //加载状态  触底后自动变成true，此时执行onload逻辑
      finished: false, //是否加载完毕  false:继续加载  true:触底之后就不会加载了
      isLoading: false, //上拉刷新
      channelList: [], //频道列表
      timestamp: null //时间戳
    };
  },
  methods: {
    async onLoad() {
      // 异步更新数据
      // setTimeout 仅做示例，真实场景中一般为 ajax 请求
      // 判断默认有无时间戳
      if (this.timestamp === null) {
        this.timestamp = Date.now();
      }

      let res = await getArticles({
        channel_id: this.channelList[this.active].id,
        timestamp: this.timestamp
      });
      this.timestamp = res.data.data.pre_timestamp;
      this.list.push(...res.data.data.results);
      //4.加载状态结束
      this.loading = false;
      //5.数据全部加载完成
      if (this.list.length >= 100) {
        this.finished = true;
      }
    },

    // 下拉刷新
    onRefresh() {
      // 0.清空时间戳
      this.timestamp = null;
      // 1.一旦下拉刷新，无条件的设置finished为false(保证刷新之后可以正常上拉加载更多)
      this.finished = false;
      // 2.先清空旧数据
      this.list = [];
      // 3.设置上啦加载更多状态为true(开启底部加载动画)
      this.loading = true;
      // 4.重新请求数据

      this.onLoad();

      // 5.关闭上拉刷新动画(如果不写，上面的下拉刷新动画会一直转圈)
      this.isLoading = false;
    },
    // tab栏切换
    changeClick() {
      // 清空列表
      this.list = [];
      // 清空时间戳
      this.timestamp = null;
      // 主动调用loading
      this.loading = true;
      this.onLoad();
    }
  },
  async created() {
    let res = await getChannelList();
    // console.log(res);
    this.channelList = res.data.data.channels;
  },
  filters: {
    showTime(value) {
      return moment(value).fromNow();
    }
  }
};
</script>

<style lang="less">
.container {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  padding-top: 46px;
  padding-bottom: 50px;
  overflow: hidden;

  // logo区域
  .logo {
    background: url("~@/assets/logo.png") no-repeat;
    background-size: cover;
    width: 100px;
    height: 30px;
  }
  // 搜索按钮
  .search-btn {
    width: 100px;
    .van-icon-search {
      color: #0f9;
    }
  }
  .van-tabs {
    height: 100%;
    box-sizing: border-box;
    padding-top: 44px;
    // tab栏标题
    .van-tabs__wrap {
      position: fixed;
      left: 0;
      right: 0;
      top: 46px;
      z-index: 1;
    }
    // tab栏内容区域
    .van-tabs__content {
      overflow-y: auto;
      height: 100%;
      .van-cell__label span {
        padding-right: 10px;
      }
    }
  }
}
</style>
